<template>
    <div class="header">
        <div class="top2">
            <header class="biao">茂名智慧工地平台</header>
            <div class="search"></div>
            <div class="xiangmu">{{ sectionname }}</div>
            <div class="header-right">
                <div class="header-user-con">
                    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ username }}
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="phone" title="点击打开app下载二维码" @click="erwm = true"></div>
            <div class="phone1" @click="erwm = false" v-show="erwm" title="点击关闭二维码"></div>
            <div class="top1">
                <div class="search1">{{ nowDate }} {{ nowTime }}</div>
            </div>
        </div>
        <div class="dao">
            <ul class="daohang">
                <li @click="changeIndex(0)">
                    <router-link tag="div" to="/">
                        <span :class="{ 't-color-00EAFF': currentIndex === 0 }">项目总览</span>
                    </router-link>
                </li>

                <li @click="changeIndex(1)">
                    <router-link tag="div" to="/tongzs">
                        <span :class="{ 't-color-00EAFF': currentIndex === 1 }">作战指挥</span>
                    </router-link>
                </li>
                <li @mouseover="mouseOver5" @mouseleave="mouseLeave5" @click="changeIndex(2)">
                    <router-link tag="div" to="/dataall">
                        <span :class="{ 't-color-00EAFF': currentIndex === 2 }">智术管人</span>
                    </router-link>
                    <div id="wulian2" v-show="jiance4" @mouseover="mouseOver5" @mouseleave="mouseLeave5">
                        <span id="hjjc8" @click="renyuan">人员明细</span>
                        <span id="hjjc9" @click="shuju">实时数据</span>
                    </div>
                </li>
                <li @mouseover="mouseOver1" @mouseleave="mouseLeave1" @click="changeIndex(3)">
                    <router-link tag="div" to="/zlall">
                        <span :class="{ 't-color-00EAFF': currentIndex === 3 }">智谋管安</span>
                    </router-link>
                    <div id="wulian1" v-show="jiance1">
                        <span id="hjjc1" @click="changely3">隐患统计</span>
                        <span id="hjjc2" @click="fengxian">风险源辨识</span>
                        <span id="hjjc7" @click="anquan">安全积分</span>
                    </div>
                </li>
                <li @mouseover="mouseOver3" @mouseleave="mouseLeave3" @click="changeIndex(4)">
                    <router-link tag="div" to="zmgz">
                        <span :class="{ 't-color-00EAFF': currentIndex === 4 }">智略管质</span>
                    </router-link>
                    <div id="wulian1" v-show="jiance3">
                        <span id="hjjc3" @click="changely12">隐患统计</span>
                        <span id="hjjc4" @click="fengxian1">质量卡控</span>
                    </div>
                </li>

                <li @mouseover="mouseOver2" @mouseleave="mouseLeave2" @click="changeIndex(5)">
                    <router-link tag="div" to="/wentied">
                        <span :class="{ 't-color-00EAFF': currentIndex === 5 }">生产进度</span>
                    </router-link>
                    <div id="wulian" v-show="jiance2">
                        <span id="hjjc5" @click="changely4">进度图</span>
                        <span id="hjjc6" @click="shengchan">平面进度</span>
                    </div>
                </li>
                <li @click="changeIndex(6)">
                    <router-link tag="div" to="/jcjl">
                        <span :class="{ 't-color-00EAFF': currentIndex === 6 }">场区管理</span>
                    </router-link>
                </li>
                <li @click="changeIndex(7)">
                    <router-link tag="div" to="/charts">
                        <span :class="{ 't-color-00EAFF': currentIndex === 7 }">BIM建造</span>
                    </router-link>
                </li>
                <li @click="changeIndex(8)">
                    <router-link tag="div" to="/jcjlc">
                        <span :class="{ 't-color-00EAFF': currentIndex === 8 }">培训考核</span>
                    </router-link>
                </li>
                <li @click="changeIndex(9)" @mouseover="mouseOver12" @mouseleave="mouseLeave12">
                    <!-- <router-link tag="div" to="/from?id=4"> -->
                    <span :class="{ 't-color-00EAFF': currentIndex === 9 }">智能监测</span>
                    <!-- </router-link> -->
                    <div id="wulian1" v-show="jiance12">
                        <span id="hjjc3" @click="znzl(1)">智能张拉</span>
                        <span id="hjjc4" @click="znzl(2)">智能压浆</span>
                        <!-- <span id="hjjc4" @click="znzl(4)">喷淋养护</span> -->
                        <span id="hjjc4" @click="znzl(4)">梁场自动化</span>
                        <router-link tag="div" to="/cldw">
                            <span id="hjjc4">车辆定位</span>
                        </router-link>
                        <router-link tag="div" to="/jcjlb">
                            <span id="hjjc4">环境监测</span>
                        </router-link>
                    </div>
                </li>
                <li @click="changeIndex(10)">
                    <router-link tag="div" to="/danwei">
                        <span id="hjjc4" :class="{ 't-color-00EAFF': currentIndex === 10 }">视频监控</span>
                    </router-link>
                </li>
                <li @click="changeIndex(11)">
                    <router-link tag="div" to="/spjk">
                        <span :class="{ 't-color-00EAFF': currentIndex === 11 }">Al算法</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            erwm: false,
            mainname: '',
            jiance: false,
            jiance1: false,
            jiance2: false,
            jiance3: false,
            jiance4: false,
            jiance5: false,
            jiance6: false,
            jiance12: false,
            nowDate: null, //存放年月日变量
            nowTime: null, //存放时分秒变量
            timer: '', //定义一个定时器的变量
            currentTime: new Date(), // 获取当前时间
            username: '',
            sectionname: '',
            name: 'admin',
            message: 2,
            currentIndex: 0
        };
    },
    computed: {},
    created() {
        this.timer = setInterval(this.getTime, 1000);
    },

    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
        }
    },
    methods: {
        // tab 切换
        changeIndex(index) {
            this.currentIndex = index;
        },
        shengchan() {
            document.getElementById('hjjc6').style.color = '#00EAFF';
            document.getElementById('hjjc5').style.color = '#fff';

            this.$router.push({ path: '/jdall' });
        },
        renyuan() {
            document.getElementById('hjjc8').style.color = '#00EAFF';
            document.getElementById('hjjc9').style.color = '#fff';

            this.$router.push({ path: '/renyuan' });
        },
        shuju() {
            document.getElementById('hjjc9').style.color = '#00EAFF';
            document.getElementById('hjjc8').style.color = '#fff';
            this.$router.push({ path: '/sssj' });
        },
        fengxian() {
            document.getElementById('hjjc1').style.color = '#fff';
            document.getElementById('hjjc7').style.color = '#fff';

            document.getElementById('hjjc2').style.color = '#00EAFF';
            this.$router.push({ path: '/wentiing' });
        },
        anquan() {
            document.getElementById('hjjc1').style.color = '#fff';
            document.getElementById('hjjc2').style.color = '#fff';
            document.getElementById('hjjc7').style.color = '#00EAFF';
            this.$router.push({ path: '/bumen' });
        },
        fengxian1() {
            document.getElementById('hjjc4').style.color = '#00EAFF';
            document.getElementById('hjjc3').style.color = '#fff';
            this.$router.push({ path: '/zlkk' });
        },
        znzl(id) {
            this.$router.push({
                path: '/from',
                query: {
                    id: id
                }
            });
        },
        mouseOver2() {
            var me = this;
            me.jiance2 = true;
        },
        mouseLeave2() {
            var me = this;
            me.jiance2 = false;
        },
        mouseOver1() {
            var me = this;
            me.jiance1 = true;
        },
        mouseLeave1() {
            var me = this;
            me.jiance1 = false;
        },
        mouseOver12() {
            this.jiance12 = true;
        },
        mouseLeave12() {
            this.jiance12 = false;
        },
        mouseOver3() {
            var me = this;
            me.jiance3 = true;
        },
        mouseLeave3() {
            var me = this;
            me.jiance3 = false;
        },
        mouseOver6() {
            var me = this;
            me.jiance6 = true;
        },
        mouseLeave6() {
            var me = this;
            me.jiance6 = false;
        },
        mouseOver() {
            var me = this;
            me.jiance = true;
        },
        mouseLeave() {
            var me = this;
            me.jiance = false;
        },
        mouseOver5() {
            var me = this;
            me.jiance4 = true;
        },
        mouseLeave5() {
            var me = this;
            me.jiance4 = false;
        },
        getTime() {
            this.nowDate =
                new Date().getFullYear() +
                '-' +
                (new Date().getMonth() + 1).toString().padStart(2, '0') +
                '-' +
                new Date().getDate().toString().padStart(2, '0');
            //  "2020-02-12"   获取的是当前日期
            this.nowTime =
                new Date().getHours().toString().padStart(2, '0') +
                ':' +
                new Date().getMinutes().toString().padStart(2, '0') +
                ':' +
                new Date().getSeconds().toString().padStart(2, '0');
            //11:13:02当前时间

            //  = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
            // date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
        },
        haha() {
            this.sectionname = localStorage.getItem('section_name');
            this.username = localStorage.getItem('username');
            this.mainname = localStorage.getItem('section_principal');
        },
        changely2() {
            this.$addStorageEvent(0, 'luyou', 2);
            document.getElementById('hjjc8').style.color = '#fff';
            document.getElementById('hjjc9').style.color = '#00EAFF';
            this.$router.push({ path: '/dataall' });
        },

        changely3() {
            this.$addStorageEvent(0, 'luyou', 3);
            document.getElementById('hjjc1').style.color = '#00EAFF';
            document.getElementById('hjjc2').style.color = '#fff';
            document.getElementById('hjjc7').style.color = '#fff';
            this.$router.push({ path: '/zlall' });
        },
        changely4() {
            this.$addStorageEvent(0, 'luyou', 4);
            document.getElementById('hjjc5').style.color = '#00EAFF';
            document.getElementById('hjjc6').style.color = '#fff';
            console.log(54545454);

            this.$router.push({ path: '/wentied' });
        },
        changely12() {
            document.getElementById('hjjc3').style.color = '#00EAFF';
            document.getElementById('hjjc4').style.color = '#fff';
            this.$addStorageEvent(0, 'luyou', 12);
            this.$router.push({ path: '/zmgz' });
        },
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'loginout') {
                localStorage.removeItem('ms_username');
                localStorage.removeItem('section_id');
                localStorage.removeItem('section_name');
                this.$router.push('/login');
            }
        }
    },
    mounted() {
        this.haha();
    }
};
</script>
<style scoped>
.t-color-00EAFF {
    color: #00eaff;
}
.dao {
    float: left;
    margin-top: 20px;
    width: 100%;
    height: 74px;
    background: url(../../assets/img/bigt.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
}

#wulian {
    position: absolute;
    cursor: pointer;
    background: #102357;
    z-index: 999;
}

#wulian2 {
    position: absolute;
    cursor: pointer;
    background: #102357;
    z-index: 999;
}

#wulian2 span {
    display: flex;
    padding-left: 30px;
    cursor: pointer;
    line-height: 50px;
    width: 110px;
    font-size: 18px;
    height: 50px;
    background: #102357;
    z-index: 999;
}

#wulian1 {
    position: absolute;
    cursor: pointer;
    background: #102357;
    z-index: 999;
}

#wulian1 span {
    float: left;
    cursor: pointer;
    line-height: 50px;
    width: 153px;
    font-size: 18px;
    height: 50px;
    background: #102357;
    z-index: 999;
}

#wulian span {
    display: flex;
    padding-left: 30px;
    cursor: pointer;
    line-height: 50px;
    width: 110px;
    font-size: 18px;
    height: 50px;
    background: #102357;
    z-index: 999;
}

.tit1 {
    position: absolute;
    top: 57px;
    letter-spacing: 5px;
    width: 300px;
    height: 30px;
    text-align: center;
    font-size: 30px;
    color: #6ae0f5;
}
.search2 {
    width: 200px;
    height: 24px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    float: right;
    line-height: 50px;
    position: relative;
}

.search2 img {
    width: 21px;
    height: 21px;
    position: absolute;
    left: -25px;
    top: 15px;
}

.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    font-size: 23px;
    color: #fff;
}

.top2 {
    position: relative;
    width: 100%;
    height: 88px;
    position: relative;
    display: flex;
    justify-content: center;
}

.search {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 161px;
    height: 40px;
    line-height: 40px;
    font-size: 33px;
    color: #6ae0f5;
    font-weight: 500;
    background-size: 100% 100%;
}

.daohang {
    margin-top: 30px;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone {
    cursor: pointer;
    z-index: 999;
    position: absolute;
    top: 10px;
    right: 290px;
    width: 20px;
    height: 32px;
    background: url(../../assets/img/phone.png) no-repeat;
}

.phone1 {
    cursor: pointer;
    position: absolute;
    top: 45px;
    right: 100px;
    width: 404px;
    height: 418px;
    z-index: 999;
    background: url(../../assets/img/erwm.png) no-repeat;
}

.daohang li {
    float: left;
    list-style: none;
    width: 153px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.daohang li p {
    color: #fff;
    height: 20px;
}

.xiangmu {
    position: absolute;
    top: 85px;
    right: 20px;
    width: 378px;
    height: 18px;
    font-size: 17px;
    text-align: right;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(239, 254, 255, 1);
}

.header-right {
    position: absolute;
    top: 10px;
    right: 0;
    width: 90px;
    padding-left: 10px;
    padding-top: 5px;
}

.top1 {
    position: absolute;
    top: 10px;
    right: 80px;
    width: 190px;
    padding-left: 10px;
    padding-top: 5px;
}

.search1 {
    width: 190px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    color: #ffffff;
}

.header-user-con {
    display: flex;
    height: 20px;
    align-items: center;
}

.user-avator {
    margin-left: 20px;
}

.el-dropdown-link {
    color: floralwhite;
    cursor: pointer;
}

.el-dropdown-menu__item {
    text-align: center;
}

.biao {
    font-size: 40px;
    color: #28e1f0;
    letter-spacing: 3px;
    margin-top: 10px;
}
</style>
